<template>
	<view class="detail_info">
		<!-- {{labInfo.address}} -->
		<!-- 日历 -->
		<!-- 		<view class="calendar" v-show="false">
			
		</view> -->
		<u-modal :show="showDel" title="温馨提示" :content='content1' showCancelButton="true" @cancel="showDel=false"
			@confirm="handleDelLabConfirm"></u-modal>
		<u-toast ref="uToast"></u-toast>
		<u-modal :show="show" title="温馨提示" :content='content' @confirm="handleTip1"></u-modal>
		<u-modal :show="show2" title="温馨提示" :content='content2' @confirm="handleTip2" :showCancelButton="true"
			@cancel="handleCancel2"></u-modal>
		<!-- 类型选择下拉框 -->
		<u-picker :show="showSelect" :columns="columns" keyName="label" @confirm="handleConfirm"
			@cancel="handleCancel"></u-picker>

		<!-- 内容 -->
		<view class="content">
			<!-- 实验室详情 -->
			<view class="detail">
				<view class="detail-content">
					<!-- 图片 -->
					<view class="photo">
						<image class="photo-content" :src="labInfo.photo" mode=""></image>

					</view>
					<!-- 实验室名称 -->
					<view class="check">
						<!-- 标题 -->
						<view class="check_way">实验室名称：
							<view style="font-weight: 400">
								{{labInfo.labName}}
							</view>
						</view>

					</view>

					<!-- 实验室编号 -->
					<view class="check">
						<!-- 标题 -->
						<view class="check_way">实验室编号：
							<view style="font-weight: 400">
								{{labInfo.laboratoryId}}
							</view>
						</view>

					</view>
					<!-- 实验室类别 -->
					<view class="check">
						<!-- 标题 -->
						<view class="check_way">实验室类别：
							<view style="font-weight: 400">
								{{labInfo.typeName}}
							</view>
						</view>

					</view>
					<!-- 实验室容量 -->
					<view class="check">
						<!-- 标题 -->
						<view class="check_way">实验室容量：
							<view style="font-weight: 400">
								{{labInfo.volume}}
							</view>
						</view>

					</view>
					<!-- 预约审核方式 -->
					<view class="check">
						<!-- 标题 -->
						<view class="check_way">预约审核方式：
							<view class="check_type">
								<u-tag v-if="isExamine==1" text="人工审核" size="mini"></u-tag>
								<u-tag v-if="isExamine==0" text="自动审核" type="success" size="mini"></u-tag>
							</view>
						</view>

					</view>
					<!-- 可预约时间段-->
					<view class="emp">
						<view class="emp-title">可预约时间段：</view>
						<view class="emp_row">
							<view class="row_item" v-for="(item,index) in labInfo.selectTimes" :key="index">

								<text class="r_number">{{item.start}}~{{item.end}}</text>
							</view>

						</view>
					</view>
					<!-- 设备 -->
					<view class="emp">
						<view class="emp-title">实验室设备：</view>
						<view class="emp_row">
							<view class="row_item" v-for="(item,index) in labInfo.eqList" :key="item.equipmentId">
								<text>{{item.equName}}：</text>
								<text class="r_number">{{item.number}}</text>
							</view>

						</view>
					</view>
					<!-- 实验室地址 -->
					<view class="address">
						<!-- 标题 -->
						<view class="address_title">实验室地址：</view>
						<!-- 地址详情 -->
						<view class="address_deatil">{{labInfo.address}}</view>
					</view>

					<!-- 简介 -->
					<view class="intro">
						<view class="intro-title">实验室介绍：</view>
						<view class="intro-content">
							{{labInfo.intro}}
						</view>
					</view>
				</view>
			</view>
		</view>

		<!-- 操作按钮 -->
		<view class="button">
			<view class="btn"><u-button type="primary" text="编辑" @click="handleEdit"></u-button></view>
			<!-- <view class="btn"><u-button type="error" text="删除" @click="handleDel"></u-button></view> -->
		</view>
	</view>
</template>

<script>
	import {
		datesTime,
		countTime
	} from '../../utils/time.js'
	import {
		getLabDetail,
		createOrGetDayTime,
		noConflict,
		getUserRes,
		canIRes,
		getUserCollect,
		collectLab,
		collectCancel,
		deleteLab,
		getAllLabType
	} from '../../api/laboratory.js'
	export default {
		data() {
			return {
				activeId: "",
				showDel: false,
				content1: "此操作将删除该实验室，是否继续？",
				userCollects: [],
				content2: "",
				show2: false,
				content: '',
				show: false,
				showSelect: false,
				columns: [


				],
				laboratoryId: "",
				labInfo: {

				},
				form: {

				},
				dayTimes: [],
				startDate: "",
				endDate: "",
				color1: "2979ff",
				color2: "2979ff",
				actIdex: 0,
				isExamine: "",
				dayTimeId: "",
				nowDayTime: {},
				dayTimeIds: [],
				isCan: "",
				labInfoL: {},
				userL: {},
				types: []

			};
		},
		onLoad(options) {
			this.laboratoryId = options.laboratoryId
			this.form.laboratoryId = options.laboratoryId
			let date = new Date().getTime()
			let sub = 3 * 24 * 60 * 60 * 1000
			let edate = parseInt(date) + sub
			// 现在的时间
			let nowDay = datesTime(date)
			this.startDate = nowDay
			// 结束时间
			let endDay = datesTime(edate)
			this.endDate = endDay
			// console.log(nowDay, endDay);
			this.form.dateTime = nowDay
			// console.log(this.form);
			// 获取实验室当日可预约时间段
			this.handleDayTime()
			// 获取实验室详情
			this.handleGetLabDetail()
			// this.handleUserRes()

		},
		methods: {
			// 获取所有实验室类别
			handleGetAllType(data) {
				let obj = {
					...data
				}
				getAllLabType().then(res => {
					this.types = res.data
					let arr = [...this.types]
					arr.forEach((item, index) => {
						if (data.typeId == item.typeId) {
							obj.typeName = item.typeName
						}
					})
					this.labInfo = {
						...obj
					}
				})
			},
			// 删除实验室确定按钮点击事件
			handleDelLabConfirm() {
				deleteLab({
					laboratoryId: this.laboratoryId
				}).then(res => {
					uni.$u.toast("删除成功")
					setTimeout(() => {
						uni.navigateTo({
							url: "/subpages/admin_lab_manage/admin_lab_manage"
						})
					}, 800)
				}).catch(error => {
					uni.$u.toast("删除失败")
				})
				this.showDel = false
			},
			// 删除实验室
			handleDel() {
				this.showDel = true
			},
			// 编辑实验室
			handleEdit() {
				let laboratoryId = this.laboratoryId
				uni.navigateTo({
					url: `/subpages/admin_lab_edit/admin_lab_edit?id=${laboratoryId}`
				})
			},

			// 取消收藏实验室
			// collectCancel
			handleCancelCollect() {
				let user = uni.getStorageSync('user')
				let userId = user.userId
				collectCancel({
					userId,
					laboratoryId: this.labInfo.laboratoryId
				}).then(res => {
					this.$refs.uToast.show({
						type: 'success',
						message: "已取消",
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
					})
					// 重新请求用户实验室收藏列表数据
					this.handleGetUserCollect()

				})
			},
			// 收藏实验室
			hadleCollectLab() {
				let user = uni.getStorageSync('user')
				let userId = user.userId
				collectLab({
					userId,
					laboratoryId: this.labInfo.laboratoryId
				}).then(res => {
					// console.log(res);
					// 提示收藏成功
					this.$refs.uToast.show({
						type: 'success',
						message: "收藏成功",
						iconUrl: 'https://cdn.uviewui.com/uview/demo/toast/success.png'
					})
					// 重新请求用户实验室收藏列表数据
					this.handleGetUserCollect()
				})

			},
			// 获取用户实验室收藏列表
			handleGetUserCollect() {
				let user = uni.getStorageSync('user')
				let userId = user.userId
				getUserCollect({
					userId
				}).then(res => {
					// console.log(res);
					this.userCollects = res.data.list
					let arr = [...this.userCollects]
					this.labInfo.isCollected = false
					arr.forEach((item, index) => {
						if (this.labInfo.laboratoryId == item.laboratoryId) {
							this.labInfo.isCollected = true
							return
						}
					})

				})
			},
			// 取消按钮点击事件
			handleCancel2() {
				this.show2 = false
			},
			// 预约其他实验室确定按钮点击事件
			handleTip2() {
				let labInfo = this.labInfoL
				let user = this.userL
				let baseInfo = {
					dayTimeId: this.dayTimeIdL,
					userId: user.userId,
					type: 1,
					laboratoryId: labInfo.laboratoryId,
					isExamine: labInfo.isExamine,
					labName: labInfo.labName,
					address: labInfo.address,
					start: this.nowDayTime.start,
					end: this.nowDayTime.end,
					dateTime: this.form.dateTime,
				}
				uni.navigateTo({
					url: `/pages/res_info/res_info?baseInfo=` + encodeURIComponent(JSON
						.stringify(baseInfo))
				})
				this.show2 = false
			},
			// 获取用户的预约列表
			handleUserRes() {
				let user = uni.getStorageSync('user')
				getUserRes({
					userId: user.userId
				}).then(res => {
					let arr = [...res.data.list]
					let arr1 = []
					arr.forEach((item, index) => {
						arr1.push(item.dayTimeId)
					})
					// console.log(arr1);
					this.dayTimeIds = [...arr1]

				})
			},
			// 时间冲突提示确定按钮点击事件
			handleTip1() {
				this.show = false
			},
			// 预约点击事件
			handleRes(item) {
				let tStatus = item.tStatus
				let {
					start,
					end,
					dateTime,
				} = item
				this.nowDayTime = {
					...item
				}
				let user = uni.getStorageSync('user')
				let userId = user.userId
				noConflict({
					start,
					end,
					dateTime,
					userId
				}).then(res => {

					let isConf = res.data.isConf
					// 时间没有冲突
					if (!isConf) {
						if (tStatus == 0 && user.roleId == 1) {
							this.columns = [
								[{
										value: 2,
										label: "个人预约"
									},
									{
										value: 1,
										label: "课堂预约"
									},

								]

							]
						} else if (tStatus == 0 && user.roleId == 2) {
							this.columns = [
								[{
									value: 2,
									label: "个人预约"
								}]
							]
						} else if (tStatus == 2) {
							this.columns = [
								[{
									value: 2,
									label: "个人预约"
								}]
							]
						}
						this.showSelect = true
					} else {
						// 时间冲突了
						this.show = true
						this.content = "当前时间与您的其它预约相冲突，请您重新选择其它时间另行预约。"
					}

				})
				// console.log(user);

			},
			// 选择器关闭按钮点击事件
			handleCancel() {
				this.showSelect = false
			},
			// 选择器确定按钮点击事件
			handleConfirm(data) {
				let user = uni.getStorageSync('user')
				this.userL = user
				let tuser = uni.getStorageSync('tuser')
				// console.log(data);
				let index = data.indexs[0]

				// console.log(index);
				if (index == 0) {
					canIRes({
						// 时间段当前状态
						tStatus: this.nowDayTime.tStatus,
						// 实验室类型Id
						typeId: this.labInfo.typeId,
						// 预约类型
						resType: 1,
						// 当前日期
						dateTime: this.form.dateTime,
						// 开始时间
						start: this.nowDayTime.start,
						// 结束时间
						end: this.nowDayTime.end,
					}).then(res => {
						// console.log(res);
						let canIRes = res.data.canIRes
						let labInfo = res.data.labInfo
						this.labInfoL = labInfo
						this.dayTimeIdL = res.data.timeId
						// 可以预约当前实验室
						if (canIRes) {

							let baseInfo = {
								dayTimeId: this.nowDayTime.timeId,
								userId: user.userId,
								type: 1,
								laboratoryId: this.labInfo.laboratoryId,
								isExamine: this.isExamine,
								labName: this.labInfo.labName,
								address: this.labInfo.address,
								start: this.nowDayTime.start,
								end: this.nowDayTime.end,
								dateTime: this.form.dateTime
							}

							uni.navigateTo({
								url: `/pages/res_info/res_info?baseInfo=` + encodeURIComponent(JSON
									.stringify(baseInfo))
							})
						} else {
							this.show2 = true
							this.content2 =
								"系统检测到您所选择的日期和时间段中，存在与当前实验室属于同类型的实验室，且该实验室未被预约满，出于实验室资源合理利用方面考虑，系统将优先为您预约该实验室，为您带来不便敬请谅解！"
							// this.handleTip2(labInfo, user)

						}
					})
					// 个人预约
					// 判断预约时间冲突 冲突就不允许下一步
					// 不冲突再判断是否有已经预约但是没有预约满的实验室，有就预约它，没有


				} else if (index == 1) {
					// 课堂预约
					// 判断预约时间冲突 冲突就不允许下一步
					// 需要登录然后获取到用户信息，userId
					let baseInfo = {
						dayTimeId: this.nowDayTime.timeId,
						userId: user.userId,
						type: 0,
						isExamine: this.isExamine,
						labName: this.labInfo.labName,
						address: this.labInfo.address,
						start: this.nowDayTime.start,
						end: this.nowDayTime.end,
						dateTime: this.form.dateTime
					}

					uni.navigateTo({
						url: `/pages/res_info/res_info?baseInfo=` + encodeURIComponent(JSON.stringify(baseInfo))
					})
				}
				this.showSelect = false
			},
			// 切换详情
			handleSwitch(index) {
				this.actIdex = index
			},
			// 创建或获取当前日期的可预约时间段
			handleDayTime() {
				let nowTime = new Date().getTime()
				createOrGetDayTime(this.form).then(res => {

					let arr = [...res.data.list]
					arr.forEach((item, index) => {
						let a = countTime(item.start, item.dateTime)
						if (nowTime > a) {
							// 已过期
							item.expire = true
						}

					})

					this.dayTimes = [...arr]

					this.handleUserRes()
				})
			},
			change(a) {
				// console.log(a);
				this.form.dateTime = a.fulldate
				// console.log(this.form);
				this.handleDayTime()

			},
			handleGetLabDetail() {
				getLabDetail({
					laboratoryId: this.laboratoryId
				}).then(res => {
					this.labInfo = res.data
					console.log(this.labInfo);
					this.isExamine = res.data.isExamine
					// 获取所有实验室类别
					this.handleGetAllType(this.labInfo)
					// 获取用户收藏的所有实验室列表
					this.handleGetUserCollect()
				})
			}
		},
		onShow() {
			this.handleDayTime()
			// 获取实验室详情
			this.handleGetLabDetail()
			// 获取用户收藏实验室列表
			// this.handleGetUserCollect()
		}
	}
</script>

<style lang="scss">
	* {
		box-sizing: border-box;
	}

	.detail_info {
		width: 100%;
		min-height: 100vh;
		padding-bottom: 60upx;

		.content {
			width: 100%;
			height: 100%;

			.title {
				width: 100%;
				font-size: 20px;
				font-weight: 700;
				background-color: #fff;
				min-height: 45px;
				line-height: 45px;
				padding-left: 10px;
			}

			.switch {
				width: 100%;
				height: 70upx;
				background-color: #f8f8f8;
				display: flex;
				justify-content: center;

				.s-item {
					height: 100%;
					width: 250upx;
					// background-color: pink;
					line-height: 70upx;
					text-align: center;
					display: flex;
					flex-direction: row;
					justify-content: center;
					align-items: center;
					margin-right: 20upx;

					.tip {
						border-bottom: 2px solid transparent;
					}

				}

				.s_item_act {
					color: #2979ff;

					.tip {
						border-bottom: 2px solid #2979ff;
					}
				}

			}

			.detail {
				box-sizing: border-box;
				width: 100%;
				min-height: 60vh;
				padding: 30upx;


				.detail-content {
					box-sizing: border-box;
					width: 100%;
					min-height: 60vh;
					border-radius: 20upx;
					background-color: #fff;
					box-shadow: 0 0 10px rgba(0, 0, 0, .15);
					padding: 20upx;
					padding-bottom: 150upx;

					.photo {
						position: relative;
						width: 100%;
						height: 300upx;
						// background-color: pink;
						border-radius: 10upx;

						.photo-content {
							width: 100%;
							height: 100%;
							border-radius: 10upx;
						}

						.collect {
							position: absolute;
							bottom: 0;
							right: 0;
							width: 180upx;
							height: 60upx;
							// background-color: pink;
							display: flex;
							flex-direction: row;
							align-items: center;


							.coll_title {
								font-size: 30upx;
								margin-right: 10upx;
								margin-left: 20upx;
								color: #fff;

							}

							.coll-icon {}
						}
					}


					.emp {
						margin-top: 20upx;


						.emp-title {
							font-weight: 700;
							margin-bottom: 15upx;
						}

						.emp_row {
							// margin-bottom: 15upx;
							display: flex;
							flex-direction: row;
							flex-wrap: wrap;
							justify-content: flex-start;

							.r_number {
								color: #afafaf;

							}

							.row_item {
								width: 50%;
								margin-bottom: 20upx;
							}



						}



					}

					.address {
						.address_title {
							font-weight: 700;
							margin-bottom: 15upx;
							// margin-top: 20upx;
						}

						.address_deatil {}
					}

					.check {
						.check_way {
							font-weight: 700;
							margin-bottom: 15upx;
							margin-top: 20upx;
							display: flex;
							flex-direction: row;
							justify-content: flex-start;
							align-items: center;

							.check_type {
								width: 122upx;

							}
						}

					}

					.intro {
						.intro-title {
							font-weight: 700;
							margin-bottom: 15upx;
							margin-top: 20upx;
						}
					}
				}
			}

			.res_time {
				width: 100%;
				min-height: 60vh;

				.calendar {
					width: 100%;

					background-color: #fff;
				}

				.res_list {
					box-sizing: border-box;
					width: 100%;
					min-height: 400upx;
					background-color: #fff;
					padding: 20upx;
					margin-top: 30upx;

					.list_item {
						position: relative;
						width: 100%;
						min-height: 235upx;
						box-shadow: 1px 0px 10px rgba(0, 0, 0, 0.15);
						border-radius: 20upx;
						background-color: #fff;
						overflow: hidden;
						margin-bottom: 30upx;

						.top_times {
							box-sizing: border-box;
							padding: 0 20upx;
							width: 100%;
							height: 60upx;
							border-bottom: 2px solid #5494ff;
							line-height: 60upx;
							font-size: 30upx;
							color: #5494ff;
							font-weight: 700;


						}

						.bottom_info {
							box-sizing: border-box;
							padding: 15upx 30upx;

							.time_row {
								font-size: 30upx;
								font-weight: 700;
								margin-top: 20upx;

								.status {
									display: flex;
									flex-direction: row;
									justify-content: flex-start;
									align-items: center;

									.tag {

										width: 145upx;
									}
								}

							}
						}


						.res_btn {
							position: absolute;
							bottom: 20upx;
							right: 20upx;
						}

					}
				}
			}
		}

		.button {
			width: 100%;
			height: 50upx;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			box-sizing: border-box;
			padding: 0 30upx;
			margin-top: 10upx;

			.btn {
				// width: 48%;
				width: 100%;
				height: 100%;
			}
		}
	}
</style>